<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cs3过渡模块</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			/*transition [trænˈzɪʃn]:过渡
			property[ˈprɒpəti] 特性，属性;财产，地产;[戏]道具;所有权
			duration [duˈreɪʃn]持续，持续的时间，期间;（时间的）持续，持久，连续;
			delay[dɪˈleɪ] :耽搁;延迟，拖延;被耽搁或推迟的时间
			transition-timing-function:ease-in-out;*/
			transition-property: width, background-color;
			transition-duration: 5s, 10s;
			transition-delay: 0s;
		}
		div:hover{
			width: 500px;
			background-color: blue;
		}

	</style>
</head>
<body>

<!-- 1.过渡要素
	必须要有属性变化
	必须要告诉哪个属性需要执行过渡效果
	必须要告诉过渡效果的持续时长

	2注意点
	当多个属性需要同时执行过渡效果时用逗号隔开即可

	transition-timing-function:
		linear: 匀速
		ease: 逐渐慢下来
		ease-in： 逐渐加速
		ease-out: 逐渐减速
		ease-in-out： 先加速后减速

		连写
		transition: property duration timing-function delay
		transition: width 10s linear 0s, background-color 10s linear 0s;
		transition: all 5s;全部的元素的设置
		可以省略后面两个参数
	 -->
	<div>
		
	</div>
	
		
	
</body>
</html>